<template>
    <div id="app">
        <ul-li :filelist="filelist"></ul-li>
        <button @click="status = !status">toggle</button>
        <transition name="fade"
            enter-active-class='animated flip'
            leave-active-class='animated fadeOut'
        >
            <div class="box" v-show="status"></div>
        </transition>
    </div>
</template>

<script>
import ulLi from '@/ul-li'
export default {
   components:{
       ulLi
   },
   data(){
       return {
           filelist:[],
           status:false
       }
   },
   created(){
       this.$http.get('/api/filelist').then((res) => {
           if(res.data.code === 1){
               this.filelist = res.data.data;
           }
       }).catch((error) =>{
           console.log(error)
       })
   }
}
</script>

<style>
    @import './assets/animate.css';
    .box{
        width:100px;
        height:100px;
        background: red;
    }

    /* .fade-enter,.fade-leave{
        opacity: 0;
    } */
    .fade-enter-active{
        /* transition:opacity .5s; */
        animation: ani .5s;
    }
    /* .fade-enter-to{
        opacity: 1;
    } */
    .fade-leave-active{
        /* transition:opacity 1s; */
        animation:ani .5s reverse;
    }
    /* .fade-leave-to{
        opacity:0;
    } */

    @keyframes ani {
        0%{
            width:50px;
            height:50px;
            opacity: 0;
        }
        50%{
            width:80px;
            height:80px;
            opacity: 0.5;
        }
        100%{
            width:100px;
            height:100px;
            opacity: 1;
        }
    }


</style>


